<template>
    <el-card>
        <el-menu active-text-color="#000000" background-color="#FFFFFF" text-color="#606266" @select="hadnlesSelect"
            default-active="/over/view">
            <el-menu-item index="/over/view">
                数据概览
            </el-menu-item>
            <el-sub-menu v-for="(item, index) in routes.filter(e => e.children.length > 0 && e.meta.isShow)" :key="index"
                :index="item.path">
                <template #title>
                    <span>{{ item.name }}</span>
                </template>
                <template v-if="item.children.length > 0">
                    <el-menu-item v-for="(item2, index2) in item.children.filter(e => e.meta!.isShow)" :index="item2.path"
                        :title="item2.name" :key="index2">
                        <span>{{ item2.name }}</span>
                    </el-menu-item>
                </template>
            </el-sub-menu>
        </el-menu>
    </el-card>
</template>
  
<script lang="ts" setup>
import router from '@/router'

import type { RouteRecordNormalized } from 'vue-router'

const routes: RouteRecordNormalized[] = reactive(router.getRoutes());

const emit = defineEmits<{ (e: 'menuSelect', index: string): void }>()

function hadnlesSelect(index: string) {
    emit('menuSelect', index)
}

onMounted(()=>{
    emit('menuSelect','/over/view')
})
</script>
  

<style lang="scss" scoped>
.el-card {
    height: 100%;
    margin-top: 10px;
    margin-left: 10px;

    .el-menu {
        border: 0px;
        width: 100%;
    }

}
</style>